p.color-text {
    font-size: inherit;
    font-family: var(--font-stack--monospace);
    margin-top: 25px;
    color: WHITE;
}

p.color-text-s {
    font-size: x-small;
    font-family: var(--font-stack--monospace);
    margin-top: 28px;
    color: WHITE;
}

p.color-hex {
    font-size: small;
    font-family: var(--font-stack--monospace);
    margin-top: 15px;
    color: WHITE;
}

p.color-hex-s {
    font-size: small;
    font-family: var(--font-stack--monospace);
    margin-top: 18px;
    color: WHITE;
}

div.color-group {
    display: flex;
    flex-wrap: wrap;
}

.colors {
    float: left;
    padding: 10px;
    border: 10px;
    margin: 0;
    width: 80px;
    height: 80px;
    text-align: center;
}

.BLUE_A {
    background: #C7E9F1;
    color:#C7E9F1;
}

.BLUE_B {
    background: #9CDCEB;
    color:#9CDCEB;
}

.BLUE_C {
    background: #58C4DD;
    color:#58C4DD;
}

.BLUE_D {
    background: #29ABCA;
    color:#29ABCA;
}

.BLUE_E {
    background: #1C758A;
    color:#1C758A;
}

.TEAL_A {
    background: #ACEAD7;
    color:#ACEAD7 ;
}

.TEAL_B {
    background: #76DDC0;
    color: #76DDC0;
}

.TEAL_C {
    background: #5CD0B3;
    color: #5CD0B3;
}

.TEAL_D {
    background: #55C1A7;
    color: #55C1A7;
}

.TEAL_E {
    background: #49A88F;
    color: #49A88F;
}

.GREEN_A {
    background: #C9E2AE;
    color: #C9E2AE;
}

.GREEN_B {
    background: #A6CF8C;
    color: #A6CF8C;
}

.GREEN_C {
    background: #83C167;
    color: #83C167;
}

.GREEN_D {
    background: #77B05D;
    color: #77B05D;
}

.GREEN_E {
    background: #699C52;
    color: #699C52;
}

.YELLOW_A {
    background: #FFF1B6;
    color: #FFF1B6;
}

.YELLOW_B {
    background: #FFEA94;
    color:#FFEA94 ;
}

.YELLOW_C {
    background: #FFFF00;
    color: #FFFF00;
}

.YELLOW_D {
    background: #F4D345;
    color: #F4D345;
}

.YELLOW_E {
    background: #E8C11C;
    color: #E8C11C;
}

.GOLD_A {
    background: #F7C797;
    color:#F7C797;
}

.GOLD_B {
    background: #F9B775;
    color:#F9B775;
}

.GOLD_C {
    background: #F0AC5F;
    color:#F0AC5F;
}

.GOLD_D {
    background: #E1A158;
    color:#E1A158;
}

.GOLD_E {
    background: #C78D46;
    color:#C78D46;
}

.RED_A {
    background: #F7A1A3;
    color:#F7A1A3;
}

.RED_B {
    background: #FF8080;
    color:#FF8080;
}

.RED_C {
    background: #FC6255;
    color:#FC6255;
}

.RED_D {
    background: #E65A4C;
    color:#E65A4C;
}

.RED_E {
    background: #CF5044;
    color:#CF5044;
}

.MAROON_A {
    background: #ECABC1;
    color: #ECABC1;
}

.MAROON_B {
    background: #EC92AB;
    color: #EC92AB;
}

.MAROON_C {
    background: #C55F73;
    color: #C55F73;
}

.MAROON_D {
    background: #A24D61;
    color: #A24D61;
}

.MAROON_E {
    background: #94424F;
    color: #94424F;
}

.PURPLE_A {
    background: #CAA3E8;
    color: #CAA3E8;
}

.PURPLE_B {
    background: #B189C6;
    color: #B189C6;
}

.PURPLE_C {
    background: #9A72AC;
    color: #9A72AC;
}

.PURPLE_D {
    background: #715582;
    color: #715582;
}

.PURPLE_E {
    background: #644172;
    color: #644172;
}

.GREY_A {
    background: #DDDDDD;
    color: #DDDDDD;
}

.GREY_B {
    background: #BBBBBB;
    color: #BBBBBB;
}

.GREY_C {
    background: #888888;
    color: #888888;
}

.GREY_D {
    background: #444444;
    color: #444444;
}

.GREY_E {
    background: #222222;
    color: #222222;
}

.PURE_RED {
    background: #FF0000;
    color: #FF0000;
}

.PURE_GREEN {
    background: #00FF00;
    color: #00FF00;
}

.PURE_BLUE {
    background: #0000FF;
    color: #0000FF;
}

.WHITE {
    background: #FFFFFF;
    color: #FFFFFF;
}

.BLACK {
    background: #000000;
    color: #000000;
}

.GREY_BROWN {
    background: #736357;
    color: #736357;
}

.DARK_BROWN {
    background: #8B4513;
    color: #8B4513;
}

.LIGHT_BROWN {
    background: #CD853F;
    color: #CD853F;
}

.ORANGE {
    background: #FF862F;
    color: #FF862F;
}

.PINK {
    background: #D147BD;
    color: #D147BD;
}

.LIGHT_PINK {
    background: #DC75CD;
    color: #DC75CD;
}
